<template>
  <!-- 头部 -->
  <a-layout-header id="components-layout-demo-top-side-2" class="header">
    <div class="logo">
      <img src="@/assets/logo.png" alt="" class="logoImg" />
      <span class="logoTitle">知识星球</span>
    </div>

    <a-menu v-model:selectedKeys="state.selectedKeys" theme="dark" mode="horizontal" @click="handleClickKey"
      :style="{ lineHeight: '64px', minHeight: '64px' }">
      <a-menu-item :style="{ textAlign: 'center' }" key="/">
        <router-link to="/">首页 </router-link>
      </a-menu-item>

      <template v-if="user.id">
        <a-menu-item key="/admin/user">
          <router-link to="/admin/user">用户管理</router-link>
        </a-menu-item>
        <a-menu-item key="/admin/ebook">
          <router-link to="/admin/ebook">电子书管理</router-link>
        </a-menu-item>
        <a-menu-item key="/admin/category">
          <router-link to="/admin/category">菜单管理</router-link>
        </a-menu-item>

      </template>
      <a-menu-item key="/about">
        <router-link to="/about">关于我们</router-link>
      </a-menu-item>
      <!-- 登陆按钮 -->
      <a class="login-menu" v-show="user.id">
        <span v-if="user.name">您好：{{ user.name }}</span>
      </a>
      <a-popconfirm title="确认退出登录?" ok-text="是" cancel-text="否" @confirm="logout()">
        <a class="login-menu logout-menu" v-show="user.id">
          <span>退出登录</span>
        </a>
      </a-popconfirm>
      <a class="login-menu login-css" v-show="!user.id" @click="showLoginModal">
        <span>登录</span>
      </a>

    </a-menu>
    <!-- 登陆模态框 -->
    <a-modal title="登录" v-model:visible="loginModalVisible" :confirm-loading="loginModalLoading" @ok="login">
      <a-form :model="loginUser" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="登录名">
          <a-input v-model:value="loginUser.loginName" />
        </a-form-item>
        <a-form-item label="密码">
          <a-input v-model:value="loginUser.password" type="password" />
        </a-form-item>
      </a-form>
    </a-modal>

  </a-layout-header>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRef, onMounted, watch, computed } from "vue";
import { message } from 'ant-design-vue';
import { useRouter } from "vue-router";
import axios from 'axios';
import store from "@/store";


declare let hexMd5: any;
declare let KEY: any;

export default defineComponent({
  name: "the-header",
  setup() {
    // 登录后保存
    const user = computed(() => store.state.user)

    const router = useRouter();
    const state = reactive({
      selectedKeys: [""],
    });

    const storeMeta = localStorage.getItem("meta");

    // 用来登录
    const loginUser = ref({
      loginName: "test",
      password: "test123"
    });
    const loginModalVisible = ref(false);
    const loginModalLoading = ref(false);
    const showLoginModal = () => {
      loginModalVisible.value = true;
    };
    // 登录
    const login = () => {
      loginModalLoading.value = true;
      //对密码进行加密
      loginUser.value.password = hexMd5(loginUser.value.password + KEY);
      axios.post('/user/login', loginUser.value).then((response) => {
        loginModalLoading.value = false;
        const data = response.data;
        if (data.code === '200') {
          loginModalVisible.value = false;
          message.success("登录成功！");

          store.commit("setUser", data.data);

        } else {
          message.error(data.msg);
        }
      });

    };

    // 退出登录
    const logout = () => {
      axios.get(`/user/logout/${user.value.token}`).then((res) => {

        const data = res.data;
        if (data.code === '200') {
          message.success("退出成功！");

          store.commit("setUser", {});
        } else {
          message.error(data.msg);
        }
      })
    }

    // 侧边栏切换
    if (storeMeta === null) {
      state.selectedKeys.push("/");
      router.push("/");
    } else {
      state.selectedKeys.push(JSON.parse(storeMeta).key);
    }

    const handleClickKey = (e: any) => {
      state.selectedKeys = [e.key];
      console.log(state.selectedKeys);
    };


    return {
      state,
      handleClickKey,
      loginModalVisible,
      loginModalLoading,
      showLoginModal,
      loginUser,
      login,
      user,
      logout,
    }

  }
});
</script>

<style>
.logoImg {
  position: absolute;
  top: 6px;
  left: 5px;

  width: 30px;
}

/*#components-layout-demo-top-side-2 {
  display: flex;
}*/

/* #components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;

}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}
*/
/*#components-layout-demo-top-side-2 .logo {
  color: #fff;
  position: relative;
}

.login-menu {
  position: absolute !important;
  right: 5%;
  width: 96px;
  text-align: center;
  height: 64px;
  line-height: 64px;
}*/
#components-layout-demo-top-side-2 .logo {
  float: left;
  position: relative;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;

}



.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.logo span {
  position: absolute;
  top: -15px;
  left: 40px;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  font-family: "微软雅黑";
}

.login-menu {
  position: absolute !important;
  right: 8%;
  width: 96px;
  text-align: center;
  height: 64px;
  line-height: 64px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.65);
}

.login-css {
  right: 3%;
}

.logout-menu {
  right: 3%;
}
</style>